<%@ page import="java.util.List" %>
<%--
  Created by IntelliJ IDEA.
  User: Lenovo
  Date: 2020/11/25
  Time: 14:22
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>部门人数统计情况</title>
    <script src="${path}/echarts/js/echarts.min.js"></script>
    <script src="${path}/echarts/js/jquery-3.3.1.min.js"></script>
</head>
<body>
<!--图表容器-->
<div id="echarts" style="width: 600px;height:400px"></div>
</body>
<script>

    //1.调用echarts的init方法，初始化一个图表对象
    var myCharts = echarts.init(document.getElementById('echarts'));
    //组装图表对象的数据和参数
    var option = {
        //标题 包含一级标题和二级标题
        title : {
            text : 'Oracle公司各部门人数统计',
            subText : '本数据来源于数据库',
            x : 'center' //水平方向的对齐方式  center left right
        },
        //提示框
        tooltip : {},
        //图例
        legend : {
            orient : 'vertical' , //图例的排列方式  vertical 垂直排列  horizontal 水平排列
            left :  'left' ,// 水平方向的对齐方式
            data : []
        },
        //图表系列 是一个数组，可能是多个对象
        series : [{
            name : '部门人数统计',
            type : 'pie',    //图像的类型 必须是echarts内置的类型
            radius : '50%',  //饼状图半径大小
            center : ['50%','50%'],  //饼状图圆心位置
            data : []   // 饼状图的数据格式 ： key-value格式
        }]
    };

    //2.调用图表对象的setOption()方法，给图表设置各项参数
    myCharts.setOption(option);

    //在数据加载完之前，显示一段加载动画
    myCharts.showLoading();

    //创建1个JS数组  用来保存统计项
    var names = []; //部门名字
    var objs = []; //设置对象数组，以name:XXX value:XXX的形式，存储统计数据
    //使用jquery的ajax异步请求，向服务器请求统计数据
    $.ajax({
        url : '<%=request.getContextPath()%>/count/deptNum', //请求的路径
        dataType : 'json',//设置响应数据的格式
        data : {},//要提交的请求参数
        type : 'post',//请求的类型
        success : function(data){
            //data默认就是后台响应的数据
            console.log(data);

            for(var i=0;i<data.length;i++){
                //图例
                names.push(data[i].DNAME);
                //图表数据
                var obj = new Object();
                obj.name = data[i].DNAME;
                obj.value = data[i].TOTALCOUNT;
                objs.push(obj);
            }
            //图例的数据data，放入
            option.legend.data = names;

            //将响应回来的数据，放入到图表系列数据中
            option.series[0].data = objs;
            //隐藏加载动画
            myCharts.hideLoading();
            //重新渲染图表
            myCharts.setOption(option);
        }

    });
</script>
</html>
